﻿@Master['Master']
@Section['Content']
<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/morris.js/0.5.1/morris.css">

<script src="/content/js/raphael-2.1.0.min.js"></script>
<script src="/content/js/morris.min.js"></script>

<script>
$.getJSON( "/notifications.json", function( response ) {
    jsonData = response;
	//{"MailNotify":0,"LogNotify":6,"Uptime":{"Day":0,"Hour":0,"Min":27,"Sec":46}}
	if (location.pathname == "/")
	{
	//$("#uptime").html(jsonData.Uptime);
	$("#uptime").html("Day:" + jsonData.Uptime.Day + " Hour:" +jsonData.Uptime.Hour + " Min:" + jsonData.Uptime.Min +" Sec:" + jsonData.Uptime.Sec);
	}

});
$.ajax({
            type: "GET",
            contentType: 'application/json; charset=utf-8',
            dataType: 'json',
            url: '/statistics/data.json',
            error: function () {
                console.log("An error occurred.");
            },
            success: function (data) {
            
new Morris.Line({
  // ID of the element in which to draw the chart.
  element: 'ownmailstats',
  // Chart data records -- each entry in this array corresponds to a point on
    // the chart.
  data: data,
 
  // The name of the data record attribute that contains x-values.
  xkey: 'date',
  // A list of names of data record attributes that contain y-values.
  ykeys: ['value'],
  // Labels for the ykeys -- will be displayed when you hover over the
  // chart.
  labels: ['emails']
});			
            }
        });

</script>

<div class="container">
   <div class="row">   
                               <div class="col-md-4">
                                <div class="panel panel-success-alt noborder">
                                    <div class="panel-heading noborder">
                                        <div style="display: none;" class="panel-btns">
                                            <a data-original-title="Close Panel" href="#" class="panel-close tooltips" data-toggle="tooltip" title=""><i class="fa fa-times"></i></a>
                                        </div><!-- panel-btns -->
                                        
                                        <div class="media-body">
                                            <h5 class="md-title nomargin">Own Uptime</h5>
                                            <h3 id="uptime" class="mt5">Day:0 Hour:0 Min:0 Sec:0</h3>
                                        </div><!-- media-body -->
                                        <hr>
                                        <div class="clearfix mt20">
                                            <div class="pull-left">
                                                <h5 class="md-title nomargin"></h5>
                                                <h4 class="nomargin"></h4>
                                            </div>
                                            <div class="pull-right">
                                                <h5 class="md-title nomargin"></h5>
                                                <h4 class="nomargin"></h4>
                                            </div>
                                        </div>
                                        
                                    </div><!-- panel-body -->
                                </div><!-- panel -->
                            </div><!-- col-md-4 -->
                            
                            <div class="col-md-4">
                                <div class="panel panel-primary noborder">
                                    <div class="panel-heading noborder">
                                        <div style="display: none;" class="panel-btns">
                                            <a data-original-title="Close Panel" href="#" class="panel-close tooltips" data-toggle="tooltip" title=""><i class="fa fa-times"></i></a>
                                        </div><!-- panel-btns -->
                                        
                                        <div class="media-body">
                                            <h5 class="md-title nomargin">Total Emails</h5>
                                            <h3 class="mt5">@Model.StatsData.MailCount</h3>
                                        </div><!-- media-body -->
                                        <hr>
                                        <div class="clearfix mt20">
                                            <div class="pull-left">
                                                <h5 class="md-title nomargin"></h5>
                                                <h4 class="nomargin"></h4>
                                            </div>
                                            <div class="pull-right">
                                                <h5 class="md-title nomargin"></h5>
                                                <h4 class="nomargin"></h4>
                                            </div>
                                        </div>
                                        
                                    </div><!-- panel-body -->
                                </div><!-- panel -->
                            </div><!-- col-md-4 -->
                            
                            <div class="col-md-4">
                                <div class="panel panel-dark noborder">
                                    <div class="panel-heading noborder">
                                        <div style="display: none;" class="panel-btns">
                                            <a data-original-title="Close Panel" href="#" class="panel-close tooltips" data-toggle="tooltip" data-placement="left" title=""><i class="fa fa-times"></i></a>
                                        </div><!-- panel-btns -->
                                        
                                        <div class="media-body">
                                            <h5 class="md-title nomargin">Total Size</h5>
                                            <h3 class="mt5">@Model.StatsData.TotalSize</h3>
                                        </div><!-- media-body -->
                                        <hr>
                                        <div class="clearfix mt20">
                                            <div class="pull-left">
                                                <h5 class="md-title nomargin"></h5>
                                                <h4 class="nomargin"></h4>
                                            </div>
                                            <div class="pull-right">
                                                <h5 class="md-title nomargin"></h5>
                                                <h4 class="nomargin"></h4>
                                            </div>
                                        </div>
                                        
                                    </div><!-- panel-body -->
                                </div><!-- panel -->
                            </div><!-- col-md-4 -->
                        
          </div>
      </div>
	   <div id="ownmailstats" style="height: 250px;"></div>  
@EndSection
